<template>
  <span>
    <template v-if="prop.type === 'Boolean'">
      <template v-if="value === 'true' || value === true">
        {{
          prop.options && prop.options["booleanTrueDisplayValue"]
            ? prop.options["booleanTrueDisplayValue"]
            : $t("yes")
        }}
      </template>
      <template v-if="value === 'false' || value === false">
        {{
          prop.options && prop.options["booleanFalseDisplayValue"]
            ? prop.options["booleanFalseDisplayValue"]
            : $t("no")
        }}
      </template>
    </template>
    <template
      v-else-if="['Options', 'Select', 'FreeSelect'].indexOf(prop.type) >= 0"
    >
      <template
        v-if="prop.options && prop.options['valueDisplayType'] === 'icon'"
      >
        <i
          v-if="typeof value === 'string' && value.startsWith('glyphicon-')"
          :class="'glyphicon ' + value"
        ></i>
        <i
          v-else-if="typeof value === 'string' && value.startsWith('fa-')"
          :class="'fas ' + value"
        ></i>
        <i
          v-else-if="typeof value === 'string' && value.startsWith('fab-')"
          :class="'fab fa-' + value.substring(4)"
        ></i>
      </template>
      {{ (prop.selectLabels && prop.selectLabels[`${value}`]) || value }}
    </template>
    <template
      v-else-if="prop.options && prop.options['displayType'] === 'PASSWORD'"
      >&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</template
    >
    <template v-else>{{ value }}</template>
  </span>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    prop: {
      type: Object,
      required: true,
    },
    value: {
      type: [String, Boolean],
      required: true,
      default: "",
    },
  },
});
</script>
